<template>
  <div>
    <!--搜索-->
    <div>
      <div class="card1">
        <!--时间不应该写死，后面修改过来-->
        <div class="search_info">
          <span style="font-size: 30px;margin:10px 50px;">店铺业绩</span>
          <span style="font-size: 12px;margin-right: 200px">数据更新时间:{{dayData.nowTime}}</span>
        </div>
      </div>
    </div>
    <!--销售额-->
    <div style="margin-left: 150px">
      <div class="card2">
        <p>今日销售额/元</p>
        <p><span v-if="dayData.count > 0">￥{{dayData.count}}</span>
        <span v-else>今日未售出</span>
        </p>
      </div>

      <div class="card2">
        <p>本周销售额/元</p>
        <p><span v-if="weekData.count > 0">￥{{weekData.count}}</span>
          <span v-else>本周未售出</span>
        </p>
      </div>

      <div class="card2">
        <p>本月销售额/元</p>
        <p><span v-if="monthData.count > 0">￥{{monthData.count}}</span>
          <span v-else>本月未售出</span>
        </p>
      </div>

      <div class="card2">
        <p>本年销售额/元</p>
        <p><span v-if="yearData.count > 0">￥{{yearData.count}}</span>
          <span v-else>本年未售出</span>
        </p>
      </div>

      <div class="card2">
        <p>总销售额/元</p>
        <p><span v-if="AllData.count > 0">￥{{AllData.count}}</span>
          <span v-else>从未售出</span>
        </p>
      </div>
    </div>
    <!--最新订单(前十位)-->
    <div style="margin-left: 150px;">
      <div class="card3">
        <p><span style="font-size: 20px;margin-left: 10px">最新订单</span></p>
        <el-table :data="flowerData" stripe border style="width: 100%" >
          <el-table-column prop="orderId" label="订单编号"  align="center" width="100">
          </el-table-column>
          <el-table-column prop="accountName" label="用户信息" align="center" width="100">
          </el-table-column>
          <el-table-column  label="收货地址" align="center">
            <template slot-scope="scope">
              <span>{{scope.row.proviceName+scope.row.cityName+scope.row.areaName+scope.row.streetName+scope.row.villagesName}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="total" label="订单金额(元)" align="center" sortable></el-table-column>
          <el-table-column prop="status" label="订单状态" align="center" width="100">
            <template slot-scope="{row}">
              <p v-if="row.status===0">已取消</p>
              <p v-if="row.status===1">未支付</p>
              <p v-if="row.status===2">已付款</p>
              <p v-if="row.status===3">已接单</p>
              <p v-if="row.status===4">已发货</p>
              <p v-if="row.status===5">已收货</p>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="最近下单时间" align="center"></el-table-column>
          
        </el-table>
      </div>
    </div>
    
<!--用户消费排行(前十位)-->
    <div style="position: absolute;top: 342px;left: 1115px">
      <div class="card4">
        <p><span style="font-size: 20px;margin-left: 10px">用户消费排行</span></p>

        <el-table :data="accountData" stripe border style="width: 100%" >
          <el-table-column label="序号" type="index" width="50" align="center"></el-table-column>
          <el-table-column prop="avatar" label="头像"  align="center" >
            <template slot-scope="scope">
              <el-avatar :src="`http://localhost:8088/image/${scope.row.avatar}`" :size="40"></el-avatar>
            </template>
          </el-table-column>
          <el-table-column prop="accountName" label="姓名" align="center" >
          </el-table-column>
          <el-table-column prop="count" label="总消费(元)" align="center" sortable></el-table-column>

        </el-table>
        
        
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "IndexView",
  data() {
    return {
      pageNum: 1,
      pageSize: 10,
      total: 10,
      flowerData: [],
      accountData: [],
      dayData: [],
      weekData: [],
      monthData: [],
      yearData: [],
      AllData: [],
      nowTime: "",
    }
  },

  methods: {
    selectFlowerOrderByMerchant() {
      // 获取所有订单
      this.$axios.get("/flowerorder/selectNewFlowerOrder", {
        params: {
          pageNum: 1,
          pageSize: 10,
        }
      }).then(response => {
        if (response.data.code === 200) {
          this.flowerData = response.data.data.list;
        }
      })
    },
    selectAccountByTotal(){
      this.$axios.get("/account/selectAccountByTotal", {
        params: {
          pageNum: 1,
          pageSize: 10,
        }
      }).then(response => {
        console.log(response)
        if (response.data.code === 200) {
          this.accountData = response.data.data.list;
        }
      })
    },
    selectTotal(){
      this.$axios.get("/flowerorder/selectDayTotal")
          .then(response => {
        if (response.data.code === 200) {
          this.dayData = response.data.data;
        }
      });
      
      this.$axios.get("/flowerorder/selectWeekTotal")
          .then(response => {
            if (response.data.code === 200) {
              this.weekData = response.data.data;
            }
          });
      
      this.$axios.get("/flowerorder/selectMonthTotal")
          .then(response => {
            if (response.data.code === 200) {
              this.monthData = response.data.data;
            }
          });
      
      this.$axios.get("/flowerorder/selectYearTotal")
          .then(response=>{
            if (response.data.code === 200) {
              this.yearData = response.data.data;
            }
          });
      
      this.$axios.get("/flowerorder/selectAllTotal")
          .then(response=>{
            if (response.data.code === 200) {
              this.AllData = response.data.data;
            }
          });
    },
  },
  
  created() {
    this.selectFlowerOrderByMerchant();
    this.selectAccountByTotal();
    this.selectTotal();
  }
}


</script>

<style scoped lang="less">
.card1 {
  border-radius: 4px;
  border: 1px solid white;
  background-color: white;
  margin: 20px 150px;
  height: 55px;
}

.card1 .search_info {
  text-align: left;
}

.card1 .input-with-select {
  width: 30%;
  margin: 10px;
}

.card2 {
  border-radius: 4px;
  border: 1px solid white;
  background-color: white;
  width: 250px;
  height: 120px;
  margin-right: 70px;
  margin-top: 20px;
  float: left;
}

.card2 p {
  font-size: 20px;
}

.card3 {
  
  text-align: left;
  border-radius: 4px;
  border: 1px solid white;
  background-color: white;
  width: 893px;
  margin-top: 200px;
  height: 100%;
}
.card4{
  text-align: left;
  border-radius: 4px;
  border: 1px solid white;
  background-color: white;
  width:400px;
  
}

</style>